import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";

export const useTabls = (defaultTabName: string = "") => {
  const $route = useRoute();
  const $router = useRouter();

  const currentTabs = computed(() => {
    const tabs = $route.query?.tabs || defaultTabName;
    return tabs;
  });

  const handleTabsClick = (tab: string) => {
    const tabsName = tab;
    $router.replace(`?tabs=${tabsName}`);
  };
  return { currentTabs, handleTabsClick };
};
